<template>
  <div class="My-xx-box">
    <nav-bar title="完善信息"></nav-bar>
    <div>
      <van-form @submit="onSubmit">
        <van-cell title="微信头像">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #right-icon>
            <van-uploader v-model="fileList" multiple :max-count="1" :after-read="afterRead" />
          </template>
        </van-cell>
        <van-field
          v-model="form.userName"
          name="姓名"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写真实姓名' }]"
        />
        <van-field
          readonly
          clickable
          name="picker"
          :value="form.userType"
          label="账号类型"
          placeholder="企业/个人"
          @click="handShowPop"
        />
        <van-popup v-model="showPic" position="bottom">
          <van-picker show-toolbar :columns="qygr" @confirm="onConf" @cancel="showPic = false" />
        </van-popup>
        <div class="tishi">提交后不可更改，请如实选择</div>
        <van-field v-model="form.companyName" name="公司名称" label="公司名称" placeholder="自由职业者请勿填写" />
        <van-field
          v-model="form.position"
          name="职务"
          label="职务"
          placeholder="职务"
          :rules="[{ required: true, message: '请填写职务' }]"
        />
        <van-field
          v-model="form.email"
          name="邮箱"
          label="邮箱"
          placeholder="邮箱"
          :rules="[{ required: true, message: '请填写邮箱' }]"
        />
        <!-- <van-field
          v-model="form.password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />-->
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import navBar from '@/components/NavBar'
import { getInfo } from '@/api/login'
import { mapGetters } from 'vuex'
export default {
  components: {
    navBar,
  },

  name: 'My',
  data() {
    return {
      qygr: ['企业', '个人'],
      showPic: false,
      form: {},
      fileList: [],
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {},
  mounted() {
    console.log(this.userInfo)
    this.form = this.userInfo
    this.fileList.push({
      url: config.imgUrl + this.form.headImg,
    })
    this.form.userType = this.form.userType == 0 ? '企业' : '个人'
  },
  methods: {
    afterRead(file) {
      console.log(file)
      let fd = new FormData()
      fd.append('file', file.file)
      this.$request({
        url: '/uploadDownload/api/imgUpload',
        method: 'post',
        data: fd,
      }).then((rsp) => {
        if (rsp.code === 200) {
          console.log(this.fileList)
          this.form.headImg = rsp.data
          // /oauth/updateEssentialInformation
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
    handShowPop() {
      if (this.form.userType === null) {
        this.showPic = true
      } else {
        return
      }
    },
    onConf(val) {},

    onSubmit(values) {
      console.log('submit', this.form)
      this.form.userType = this.form.userType == '企业' ? 0 : 1
      this.$request({
        url: '/oauth/updateEssentialInformation',
        method: 'post',
        data: this.form,
      }).then((rsp) => {
        if (rsp.code === 200) {
          console.log(rsp)
          this.$toast.success('修改成功')
          this.$store.dispatch('setUserInfo', this.form)
          this.$router.go(-1)
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
  },
}
</script>

<style lang='scss'>
@import '../assets/css/base';
.My-xx-box {
  .van-uploader__upload {
    width: px2rem(88);
    height: px2rem(88);
  }
  .tishi {
    color: #0050a5;
    font-size: px2rem(24);
    width: 100%;
    text-align: right;
    margin: 10px 0;
    padding-right: 30px;
    box-sizing: border-box;
  }
}
</style>
